<template>
    <el-dialog class="addSbbmData" :title="'设备编码新增'" :visible.sync="sbbmDataDialogFormVisible" v-if="sbbmDataDialogFormVisible" width="40%" top="8vh" :before-close="handleSbbmDataCancel" :close-on-click-modal="false">
      <el-form :model="sbbmDataForm" :rules="sbbmDialogFormRules" ref="sbbmDataForm" label-width="120px">
        <el-form-item label="停电设备码" prop="tdsbm">
          <el-input v-model="sbbmDataForm.tdsbm" maxlength="10"></el-input>
        </el-form-item>
        <el-form-item label="停电设备名称" prop="tdsbmc">
          <el-input v-model="sbbmDataForm.tdsbmc" maxlength="15"></el-input>
        </el-form-item>
        <el-form-item label="设备全称" prop="sbqc">
          <el-input v-model="sbbmDataForm.sbqc" maxlength="50" clearable></el-input>
        </el-form-item>
        <el-form-item label="设备设施分类" prop="ssfl">
          <el-input v-model="sbbmDataForm.ssfl" maxlength="15" clearable></el-input>
        </el-form-item>
        <el-form-item label="统计分类标志" prop="tjbzm">
          <el-select v-model="sbbmDataForm.tjbzm" placeholder="请选择" clearable>
            <el-option v-for="item in tjbzmOptions" :key="item.value" :label="item.text" :value="item.value">
              <span class="txt">{{ item.text }}</span>
              <span class="val">{{ item.value }}</span>
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleSbbmDataCancel">取 消</el-button>
        <el-button type="primary" @click="handleSbbmDataSubmit">确 定</el-button>
      </div>
    </el-dialog>
</template>
<script>
import { addTdsbbm } from '@/api/dmgl/sbbm.js';
import { getDictCombo } from '@/api/tools/dict.js';
export default {
    data() {
        const checkTdsbm = (rule, value, callback) => {
          if (value) {
            let res = /^[0-9]+$/.test(value)
            if (!res) {
              callback(new Error('必须是数字'))
            } else {    
              callback()
            }
          } else {
            callback('停电设备码不能为空')
          }         
        }
        const checkSsfl = (rule, value, callback) => {
          if (value) {
            let res = /^[0123456789ABC]+$/.test(value)
            if (!res) {
              callback(new Error('必须是【0123456789ABC】中的字符'))
            } else {    
              callback()
            }
          } else {
            callback()
          }         
        }
        return {
          sbbmDataDialogFormVisible: false,
          sbbmDataForm: {
            tdsbm: '',
            tdsbmc: '',
            sbqc: '',
            ssfl: '',
            tjbzm: ''
          },
          sbbmDialogFormRules: {
            tdsbm: [{
              required: true,
              validator: checkTdsbm,
              trigger: 'blur'
            }],
            tdsbmc: [{
              required: true,
              message: '停电设备名称不能为空',
              trigger: 'blur'
            }],
            ssfl: [{
              required: true,
              validator: checkSsfl,
              trigger: 'blur'
            }]
          },
          tjbzmOptions: [], // 统计分类标志下拉框数据
          tjbzmDict: 'dict_sbbm_tjbzm' // 统计分类标志字典分类值
        }
    },
    props: {
      propAddData: {
        type: Object,
        default: function() {
          return {};
        }
      }
    },
    watch: {
      propAddData: {
        deep: true,
        handler(newVal, oldVal) {
          if (newVal.sbbmDataDialogFormVisible) {
            const that = this
            that.sbbmDataDialogFormVisible = newVal.sbbmDataDialogFormVisible
          }
        }
      }
    },
    created() {
      const that = this
      let pam = {
        typeCode: that.tjbzmDict
      }
      getDictCombo(pam).then(res => {
        if (res.code == 0) {
          that.tjbzmOptions = res.data
        } else {
          that.$message.error(res.message)
        }
      })
    },
    methods: {
      /** 取消 */
      handleSbbmDataCancel() {
        const that = this
        that.sbbmDataDialogFormVisible = false
        that.sbbmDataForm = {
          tdsbm: '',
          tdsbmc: '',
          sbqc: '',
          ssfl: '',
          tjbzm: ''
        }
        that.$refs.sbbmDataForm.resetFields()
      },

      /** 确定 */
      handleSbbmDataSubmit() {
        const that = this
        that.$refs['sbbmDataForm'].validate(async valid => {
          if(valid) {
            let res = await addTdsbbm(that.sbbmDataForm)
            if (res.code == 0) {
              that.$message.success('设备编码新增成功！')
              that.handleSbbmDataCancel()
              that.$emit("updateSbbmDataList")
            } else {
              that.$message.error(res.message)
            }
          }
        })
      }
    }
}
</script>
<style lang="scss" scoped>
.addSbbmData /deep/ .el-input-number {
  width: 100%;
}
.addSbbmData /deep/ .el-input-number .el-input__inner {
  text-align: left;
}
.addSbbmData /deep/ .el-select {
  width: 100%;
}
.txt {
  float: left;
}
.val {
  float: right;
  color: #8492a6;
  font-size: 13px;
}    
</style>
